<template>
	<view class="contain" style="height: 100vh;">
		<image class="bannerBg" style="" :class="{ bannerBgShow: index == bannerActive }" :src="item.icon" mode=""
			v-for="(item, index) in bannerlist1" :key="index"></image>
		<swiper class="swiper" indicator-active-color="#fff" @change="bannerChange" :indicator-dots="false"
			:autoplay="true" :interval="5000" :duration="2000" circular="true">
			<swiper-item v-for="(item, index) in bannerlist1" :key="index">
				<view class="swiper-item">
					<image style="width: 100vw;"  :src="item.icon2" mode="widthFix" ></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="btn" @click="takein">
			<view class="btn_bg">
				<text style="color: #282828; letter-spacing: 8rpx; font-size: 30rpx;">即刻下单</text>
			</view>
		</view>
	</view>
	<!-- <view class="container">
		<view class="banner">
			<image src="https://img-shop.qmimg.cn/s23107/2020/04/26/3eb7808bf105262604.jpg" mode="" class="bg"></image>
			<view class="intro">
				<view class="greet">您好，{{ isLogin ? member.thirdPartyUser[0]. nickname: '游客' }}</view>
				<view class="note">一杯奶茶，一口软欧包，在奈雪遇见两种美好</view>
			</view>
		</view>
		<view class="content">
			<view class="entrance">
				<view class="item" @tap="takein">
					<image src="/static/images/index/zq.png" class="icon"></image>
					<view class="title">自取</view>
				</view>
				<view class="item" @tap="takeout">
					<image src="/static/images/index/wm.png" class="icon"></image>
					<view class="title">外卖</view>
				</view>
			</view>
			<view class="info">
				<view class="integral_section" @tap="integrals">
					<view class="top">
						<text class="title">我的积分</text>
						<text class="value">411</text>
					</view>
					<view class="bottom">
						进入积分商城兑换奈雪券及周边好礼
						<view class="iconfont iconarrow-right"></view>
					</view>
				</view>
				<view class="qrcode_section" @tap="memberCode">
					<image src="/static/images/index/qrcode.png"></image>
					<text>会员码</text>
				</view>
			</view>
			<view class="navigators">
				<view class="left">
					<view class="grid flex-column just-content-center">
						<view class="d-flex align-items-center">
							<image src="/static/images/index/csc.png" class="mark-img"></image>
							<view class="font-size-sm text-color-base">奈雪的茶商城</view>
						</view>
						<view class="text-color-assist" style="margin-left: 40rpx; font-size: 20rpx;">优质茶礼盒，网红零食</view>
					</view>
					<view class="grid justify-content-end align-items-end">
						<image src="/static/images/index/yzclh.png" class="yzclh-img" mode="heightFix"></image>
					</view>
				</view>
				<view class="right">
					<view class="tea-activity" @tap="invite">
						<image src="/static/images/index/mcsb.png" class="mark-img"></image>
						<view>买茶送包</view>
						<view class="right-img">
							<image src="/static/images/index/mcsb_bg.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="member-gifts" @tap="packages">
						<image src="/static/images/index/hyjb.png" class="mark-img"></image>
						<view>会员劵包</view>
						<view class="right-img">
							<image src="/static/images/index/hyjb_bg.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="member-news">
				<view class="header">
					<view class="title">会员新鲜事</view>
					<view class="iconfont iconRightbutton"></view>
				</view>
				<view class="list">
					<view class="item">
						<image src="https://img-shop.qmimg.cn/s23107/2020/04/27/0039bf41c9ebd50a2c.jpg"></image>
						<view class="title">"梅"你不行 | 霸气杨梅清爽回归</view>
					</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				bannerActive:0,

				bannerlist1: [
				{
					icon: 'https://res.uxiao.vip/Utea/1.jpg',
					icon2: 'https://res.uxiao.vip/Utea/nyg.png'
				},{
					icon: 'https://res.uxiao.vip/Utea/bg2.jpg',
					icon2: 'https://res.uxiao.vip/Utea/bg1.png'
				},{
					icon: 'https://res.uxiao.vip/Utea/2.jpg',
					icon2: 'https://res.uxiao.vip/Utea/2.png'
				}]
			}
		},
		computed: {
			...mapState(['member']),
			...mapGetters(['isLogin'])
		},
		onLoad(e) {
			console.log(e);
			
			if(e.q){
				let id = decodeURIComponent(e.q).split('=')[1]
				uni.navigateTo({
					url: '/goods/order/orderDetail?order_no=' + id +'&ispay=true'
				})
			}
		},
		methods: {
			bannerChange(e) {
				this.bannerActive = e.detail.current;
			},
			takein() {
				this.$store.commit('SET_ORDER_TYPE', 'takein')
				uni.switchTab({
					url: '/pages/tarbar/menu'
				})
			},
			takeout() {
				console.log(this.isLogin);
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/Login/index'
					})
					return
				}
				uni.navigateTo({
					url: "/goods/address/address?is_choose=true"
				})
			},
			integrals() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/integrals/integrals'
				})
			},
			packages() {
				uni.navigateTo({
					url: '/pages/packages/index'
				})
			},
			memberCode() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/mine/member-code'
				})
			},
			invite() {
				uni.navigateTo({
					url: '/pages/activities/invite'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */

	.banner {
		position: relative;
		width: 100%;
		height: 600rpx;

		.bg {
			width: 100%;
			height: 600rpx;
		}

		.intro {
			position: absolute;
			top: calc(50rpx + var(--status-bar-height));
			left: 40rpx;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;

			.greet {
				font-size: $font-size-lg;
				margin-bottom: 10rpx;
			}

			.note {
				font-size: $font-size-sm;
			}
		}
	}

	.content {
		padding: 0 30rpx;
	}

	.entrance {
		position: relative;
		margin-top: -80rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			&:nth-child(1):after {
				content: '';
				position: absolute;
				width: 1rpx;
				background-color: #ddd;
				right: 0;
				height: 100%;
				transform: scaleX(0.5) scaleY(0.8);
			}

			.icon {
				width: 84rpx;
				height: 84rpx;
				margin: 20rpx;
			}

			.title {
				font-size: 30rpx;
				color: $text-color-base;
				font-weight: 600;
			}
		}
	}

	.info {
		position: relative;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.integral_section {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.top {
				display: flex;
				align-items: center;

				.title {
					color: $text-color-base;
					font-size: $font-size-base;
					margin-right: 10rpx;
				}

				.value {
					font-size: 44rpx;
					font-weight: bold;
				}
			}

			.bottom {
				font-size: $font-size-sm;
				color: $text-color-assist;
				display: flex;
				align-items: center;
			}
		}

		.qrcode_section {
			color: $color-primary;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-size-sm;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.navigators {
		width: 100%;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 20rpx;
		display: flex;
		align-items: stretch;

		.left {
			width: 340rpx;
			margin-right: 20rpx;
			display: flex;
			padding: 0 20rpx;
			flex-direction: column;
			font-size: $font-size-sm;
			color: $text-color-base;
			background-color: #F2F2E6;

			.grid {
				height: 50%;
				display: flex;
			}
		}

		.right {
			width: 290rpx;
			display: flex;
			flex-direction: column;

			.tea-activity,
			.member-gifts {
				width: 100%;
				display: flex;
				padding: 20rpx;
				font-size: $font-size-sm;
				color: $text-color-base;
				align-items: center;
				position: relative;
			}

			.tea-activity {
				background-color: #FDF3F2;
				margin-bottom: 20rpx;
			}

			.member-gifts {
				background-color: #FCF6D4;
			}

			.right-img {
				flex: 1;
				position: relative;
				margin-left: 20rpx;
				margin-right: -20rpx;
				margin-bottom: -20rpx;
				display: flex;
				align-items: flex-end;

				image {
					width: 100%;
				}
			}
		}

		.mark-img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}

		.yzclh-img {
			height: 122.96rpx;
			width: 214.86rpx;
		}
	}

	.member-news {
		width: 100%;
		margin-bottom: 30rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.title {
				font-size: $font-size-lg;
				font-weight: bold;
			}

			.iconfont {
				font-size: 52rpx;
				color: $text-color-assist;
			}
		}

		.list {
			width: 100%;
			display: flex;
			flex-direction: column;

			.item {
				width: 100%;
				height: 240rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}

				.title {
					position: relative;
					font-size: 32rpx;
					font-weight: 500;
					width: 100%;
					top: -70rpx;
					left: 16rpx;
					color: #ffffff;
				}
			}
		}
	}
.contain{
	position: relative;
	
	.btn{
		z-index: 9999;
		position: absolute;
		bottom: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		.btn_bg{
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 5rpx;
			font-weight: 500;
			
			border: 0.5rpx solid #848282;
			// background-color: rgba(255, 255, 255, 0.5);
			// backdrop-filter: blur(23px);
			// -webkit-backdrop-filter: blur(23px);
			// border: 1px solid rgba(255, 255, 255, 0.18);
			// box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
			// -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
			// border-radius: 14px;
			// -webkit-border-radius: 14px;
			// color: rgb(255, 255, 255);    
		}
	}
}
	.bannerBg {
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		z-index: 1;
		width: 100vw;
		height: 100vh;
		transition: all 0.5s;
		opacity: 0;
	}

	.bannerBgShow {
		opacity: 1 !important;
	}

	.swiper {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 750rpx;
		height: 100vh;
		border-radius: 0rpx;
		margin: 0 auto 0;
		overflow: hidden;

		.swiper-item {
			image {
				width: 750rpx;
				border-radius: 0rpx;
				transition: all 0s linear;
			}
		}
	}
</style>